<template>
	<view class="container" v-if="info">
		<block v-if="info.isfrozen != 1">
			<view class="dis_top">
				<view class="user-face">
					<image :src="info.member_info.litpic" mode="aspectFill"></image>
				</view>
				<text class="user-name">{{info.member_info.nickname}}</text>
			</view>
			<view class="distribution-main">
				<view class="distribution-main__info">
					<view class="total-money-title" @click="toCommission">
						累计收益（元）<text class="iconfont">&#xe67f;</text>
					</view>
					<view class="total-money">
						<text class="total-money__symbol">￥</text>{{info.total_profit}}
					</view>
					<view class="total-money-sub">
						含待结算
					</view>
					<view class="distribution-block">
						<view  @click="toProduct" class="distribution-block__item">
							推广产品<image src="~@/static/distribution-push.png" mode="aspectFill"></image>
						</view>
						<view @click="toInvite" class="distribution-block__item">
							邀请分销商<image src="~@/static/distribution-invite.png" mode="aspectFill"></image>
						</view>
						<view @click="toShopCode" class="distribution-block__item">
							分销商店铺<image src="~@/static/distribution-shop_code.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="distribution-main__list">
					<view class="distribution-main__list__item">
						<view class="title">
							可提现金额
						</view>
						<view class="bd">
							￥{{info.tixian}}
						</view>
						<view @click="toWallte" class="btn">
							查看
						</view>
					</view>
					<view class="distribution-main__list__item">
						<view class="title">
							我的分销商
						</view>
						<view class="bd">
							{{info.fx_member_num}}
						</view>
						<view @click="toMy" class="btn">
							查看
						</view>
					</view>
					<view class="distribution-main__list__item">
						<view class="title">
							我的客户
						</view>
						<view class="bd">
							{{info.member_num}}
						</view>
						<view @click="toCustom" class="btn">
							查看
						</view>
					</view>
				</view>		
			</view>
		</block>
		<block v-else>
			<!-- 被冻结 -->
			<view class="distribution-frozen">
				<image class="distribution-frozen__pic" src="https://xcx.zhilvhulian.com/res/static/images/distribution-frozen.png" mode="aspectFill"></image>
				<view class="distribution-frozen__dis">
					您的分销商账户已被冻结
				</view>
				<view class="distribution-frozen__dis" v-if="linkTel">
					联系客服：<text class="tel">{{linkTel}}</text>
				</view>
				<button type="default" class="apply-frozen" @click="toIndex">前往首页</button>
			</view>
		</block>
	</view>
</template>

<script>
	import {toAppIndex} from '@/utils/toPath.js'
	export default {
		components:{
		
		},
		data() {
			return {
				info:'',
				linkTel: ''
			}
		},
		onLoad() {
			// 获取分销商数据
			this.getDistributionInfo();
			// 电话号码
			let mobile = uni.getStorageSync('cfg_m_phone');
			if(mobile){
				let linkTel = mobile.split(',');
				this.linkTel = linkTel[0];
			}
			// #ifdef H5
			// 禁止分享
			this.$share({hideShare:true});
			// #endif
		},
		methods: {
			// 获取分销商数据
			async getDistributionInfo(){
				let params = {
					method: 'api/v2/distributor/get_user'
				};
				uni.showLoading({
					title:'加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				
				if(res.status)
				{
					// 检查会员分销状态
					if(res.data.fxstatus == 1)
					{
						this.info = res.data;
					}
					else
					{ // 前往分销申请页面
						uni.redirectTo({
							url:'/subPackages/distribution/apply'
						})
					}
				}
				else
				{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			
			// 前往首页
			toIndex(){
				toAppIndex();
			},
			
			// 前往钱包
			toWallte(){
				uni.navigateTo({
					url:'/subPackages/wallet/index'
				})
			},
			
			// 邀请分销商
			toInvite(){
				uni.navigateTo({
					url:'/subPackages/distribution/invite'
				})
			},
			
			// 前往产品页面
			toProduct(){
				uni.navigateTo({
					url:'/subPackages/distribution/product'
				})
			},
			
			// 前往我的客户
			toCustom(){
				uni.navigateTo({
					url:'/subPackages/distribution/custom'
				})
			},
			
			// 前往我的分销商页面
			toMy(){
				uni.navigateTo({
					url:'/subPackages/distribution/my'
				})
			},
			
			// 前往分销收益页面
			toCommission(){
				uni.navigateTo({
					url:'/subPackages/distribution/commission'
				})
			},
			
			// 分销商店铺分享页面
			toShopCode(){
				uni.navigateTo({
					url:'/subPackages/distribution/shopcode'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
	}
	.dis_top{
		padding: 74rpx 0 0;
		height: 390rpx;
		background: url(https://xcx.zhilvhulian.com/res/static/images/distribution_index_bg.png) no-repeat center;
		background-size: cover;
		box-sizing: border-box;
		text-align: center;
		.user-face{
			width: 96rpx;
			height: 96rpx;
			border-radius: 100%;
			overflow: hidden;
			border: 4rpx solid #FFFFFF;
			margin: auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.user-name{
			font-size: $uni-font-size-base;
			color: $uni-text-color-inverse;
		}
	}
	
	.distribution-main{
		padding:0 $uni-spacing-col-lg;
		position: absolute;
		display: block;
		box-sizing: border-box;
		width: 100%;
		top: 250rpx;
		&__info{
			padding: 48rpx 0 42rpx;
			background: $uni-bg-color;
			text-align: center;
			border-radius: 8rpx;
			.total-money-title{
				font-size: $uni-font-size-sm;
				color: $uni-text-color;
				.iconfont{
					font-size: $uni-font-size-mini;
				}
			}
			.total-money{
				font-size: 64rpx;
				color: #000000;
				&__symbol{
					font-size: 36rpx;
				}
			}
			.total-money-sub{
				font-size: $uni-font-size-mini;
				color: $uni-text-color-deep;
				background: #EEEEEE;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}
			.distribution-block{
				display: flex;
				justify-content: space-between;
				height: 52rpx;
				line-height: 52rpx;
				margin-top: 40rpx;
				&__item{
					width: 50%;
					font-size: $uni-font-size-base;
					color: $uni-text-color;
					position: relative;
					border-right: 2rpx solid $uni-border-color;
					image{
						height: 34rpx;
						width: 34rpx;
						vertical-align: middle;
						margin-left: 16rpx;
					}
					&:last-child{
						border-right: none;
						image{
							width: 40rpx;
						}
					}
				}
			}
		}
		
		&__list{
			height: 212rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			&__item{
				width: 33.3%;
				height: 100%;
				background: $uni-bg-color;
				margin-right: 20rpx;
				padding-left: 32rpx;
				padding-top: 40rpx;
				box-sizing: border-box;
				&:last-child{
					margin-right: 0;
				}
				
				.title{
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm;
				}
				.bd{
					color: $uni-text-color;
					font-size: $uni-font-size-lg;
					font-weight:700;
					padding: 10rpx 0;
				}
				.btn{
					color: $uni-text-color-primary;
					font-size: 22rpx;
					display: inline-block;
					padding: 4rpx 30rpx;
					border: 2rpx solid #2dbb55;
					border-radius: 30rpx;
				}
			}
		}
	}

	// 冻结
	.distribution-frozen{
		padding-top: 110rpx;
		text-align: center;
		&__pic{
			width: 158rpx;
			height: 130rpx;
			margin-bottom: 20rpx;
		}
		&__dis{
			font-size: $uni-font-size-base;
			color: $uni-text-color-deep;
			.tel{
				color: $uni-text-color-price;
			}
		}
		.apply-frozen{
			padding: 0 74rpx;
			height: 78rpx;
			line-height: 78rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color-inverse;
			background: $uni-bg-color-primary;
			display: inline-block;
			border-radius: 12rpx;
			margin-top: 36rpx;
		}
	}
</style>
